<template>
  <TopCardAndSearch labelName="账号/姓名:" placeholderName="请输入账号/姓名:">
    <!-- <template #inputBox="scope" >
      <el-form-item label="labelName">
        <el-input
          placeholder="placeholderName"
          style="width: 190px"
          type="text"
      /></el-form-item>
    </template> -->
  </TopCardAndSearch>
  <el-table :data="adminTableData" border style="width: 100%">
    <el-table-column prop="id" label="id" />
    <el-table-column prop="username" label="用户名" />
    <el-table-column prop="nickName" label="昵称" />
    <el-table-column prop="email" label="电子邮箱" />
    <el-table-column prop="createTime" label="创建时间">
      <template #default="scope">
        <!-- scope.row获取表格数据一行的那个对象 -->
        {{
          scope.row.createTime
            ? moment(scope.row.createTime).format("YYYY-MM-DD  HH:MM:SS")
            : ""
        }}
      </template>
    </el-table-column>
    <el-table-column prop="loginTime" label="最后登录">
      <template #default="scope">
        <!-- scope.row获取表格数据一行的那个对象 -->
        {{
          scope.row.loginTime
            ? moment(scope.row.loginTime).format("YYYY-MM-DD  HH:MM:SS")
            : "无记录🤷🏻‍♂️"
        }}
      </template>
    </el-table-column>
    <el-table-column prop="status" label="启用状态">
      <template #default="scope">
        <el-switch
          @change="changeStatu(scope.row)"
          :active-value="1"
          :inactive-value="0"
          v-model="scope.row.status"
          class="ml-2"
          active-color="#13ce66"
          inactive-color="#ff4949"
      /></template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <!-- 自定义指令控制有没有权限显示对应按钮     v-permission-->
        <el-button
          v-permission.nihao="'allocRole'"
          text
          type="primary"
          @click="controlDialogDistribution(true, scope.row.id)"
          size="small"
          >分配角色</el-button
        >
        <el-button
          text
          type="primary"
          size="small"
          @click="controlDialog(true, scope.row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 弹出框 -->
  <Dialog
    :rule-form="ruleForm"
    :outer-visible="isShowDialog"
    @controlDialog="controlDialog"
  />
  <Dialogdistribution
    :admin-id="adminId"
    @closeDialog="controlDialogDistribution"
    :is-show-distribution-dialog="isShowDistributionDialog"
  />
  <!-- 分页器============== -->
  <el-pagination
    class="pagination"
    v-model:currentPage="currentPage"
    v-model:page-size="pagesize"
    :page-sizes="[5, 10, 20, 50]"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper,slot"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>

<script lang="ts" setup>
import TopCardAndSearch from "../../components/TopCardAndSearch.vue";
import { reactive, toRefs, ref, Ref } from "vue";
import { getAdminListAPI, getAdminUpdateAPI } from "../../request/api";
import moment from "moment";
import Dialog from "./components/Dialogedit.vue";
import Dialogdistribution from "./components/Dialogdistribution.vue";
import { ElMessage } from "element-plus";

//用户列表
let adminTableData = ref<AdminListParamsList[]>([]);
//分页器
let currentPage = ref(0);
let pagesize = ref(0);
let total = ref(0);
//分配角色弹窗
let isShowDistributionDialog = ref(false);
let adminId = ref(0);
const controlDialogDistribution = (val: boolean, Id: number) => {
  isShowDistributionDialog.value = val;
  adminId.value = Id;
};

//点击修改用户状态
const changeStatu = async (row: IdialogruleForm) => {
  let res = await getAdminUpdateAPI(row, row.id);
  if (res.code === 200) {
    ElMessage({
      type: "success",
      message: "修改成功",
    });
  } else {
    ElMessage({
      type: "error",
      message: "修改失败",
    });
  }
};

//显示弹窗变量
let isShowDialog = ref(false);
//弹窗显示数据
let ruleForm = ref({}) as Ref<IdialogruleForm>;
//控制弹窗方法
const controlDialog = (
  val: boolean,
  item: IdialogruleForm,
  reload?: boolean
) => {
  //如果修改完成，重新请求数据更新页面
  if (reload) getAdminList();
  isShowDialog.value = val;
  ruleForm.value = item;
};

//点击改变一页显示数量
const handleSizeChange = async (val: number) => {
  await getAdminList("", currentPage.value, pagesize.value);
  pagesize.value = val;
};
//点击改变当前页
const handleCurrentChange = async (val: number) => {
  currentPage.value = val;
  await getAdminList("", currentPage.value, pagesize.value);
};
const getAdminList = async (
  keyword: string = "",
  pageNum: number = 1,
  pageSize: number = 5
) => {
  let res = await getAdminListAPI({ keyword, pageNum, pageSize });
  if (res.code === 200) {
    adminTableData.value = res.data.list;
    total.value = res.data.total;
    currentPage.value = res.data.pageNum;
    pagesize.value = res.data.pageSize;
  }
};

getAdminList();
</script>

<style lang="less" scoped>
.pagination {
  float: right;
}
</style>
